<template>
  <div id="app3">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt class="img_zuo" @click="back" />
        <div>{{sendObj.name?jiequ(sendObj.name,15):'建筑物'}}</div>
        <span class="btn-add" @click="edit" v-show="auth==200">编辑</span>
      </div>
    </header>
    <div class="main">
      <!--
      <div class="loupan">
        <div class="info">
          <div class="info-item" v-show="loupan.jxmdNum>0"><div class="showColor color-jxmd"></div>九小门店{{loupan.jxmdNum}}户</div>
          <div class="info-item" v-show="loupan.zgfNum>0"><div class="showColor color-zgf"></div>住改非{{loupan.zgfNum}}户</div>
        </div>
        <div class="hang" v-for="(item,index) of loupan.data">
          <div class="lie" v-for="(obj,i) of item">
            <div class="panel" :class="{'color-jxmd':obj.type=='jxmd','color-zgf':obj.type=='zgf'}" v-show="obj.type">
              <span>{{obj.name}}</span>
              <span>{{obj.ms}}</span>
            </div>
          </div>
        </div>

        <div class="hang">
          <div class="lie"></div>
          <div class="lie"></div>
          <div class="lie">
            <div class="panel color-jxmd">
              <span>王五</span>
              <span>XX诊所</span>
            </div>
          </div>
        </div>
        <div class="hang">
          <div class="lie"></div>
          <div class="lie">
            <div class="panel color-jxmd">
              <span>成龙</span>
              <span>XX餐饮店</span>
            </div>
          </div>
          <div class="lie"></div>
        </div>
        <div class="hang">
          <div class="lie"></div>
          <div class="lie"></div>
          <div class="lie">
            <div class="panel color-zgf">
              <span>李四</span>
              <span>住改仓</span>
            </div>
          </div>
        </div>
        <div class="hang">
          <div class="lie">
            <div class="panel color-zgf">
              <span>李五</span>
              <span>网约房</span>
            </div>
          </div>
          <div class="lie">
            <div class="panel color-jxmd">
              <span>花小名</span>
              <span>XX餐饮店</span>
            </div>
          </div>
          <div class="lie"></div>
        </div>
        <div class="hang">
          <div class="lie"></div>
          <div class="lie"></div>
          <div class="lie"></div>
        </div>

      </div>-->
      <div class="item">
        <div class="item-name">街道</div>
        <div class="item-value">{{sendObj.streetName}}</div>
      </div>
      <div class="item">
        <div class="item-name">社区</div>
        <div class="item-value">{{sendObj.communityName}}</div>
      </div>
      <div class="item">
        <div class="item-name">建筑名称</div>
        <div class="item-value">{{sendObj.name}}</div>
      </div>
      <div class="item">
        <div class="item-name">定位</div>
        <div class="item-value">
          <img @click="tomap" v-show="sendObj.map" class="sfdw" src="../../assets/images/dw_1.png" />
        </div>
      </div>
      <div class="item">
        <div class="item-name">具体地址</div>
        <div class="item-value">{{sendObj.address}}</div>
      </div>
      <div class="item">
        <div class="item-name">层数</div>
        <div class="item-value">{{sendObj.floornum}}</div>
      </div>
      <div class="item">
        <div class="item-name">每层户数</div>
        <div class="item-value">{{sendObj.floorhouse}}</div>
      </div>
      <div class="item">
        <div class="item-name">住户数</div>
        <div class="item-value">{{sendObj.housenum}}</div>
      </div>
      <div class="item">
        <div class="item-name">负楼层数</div>
        <div class="item-value">{{sendObj.negativeFloornum}}</div>
      </div>
      <div class="item">
        <div class="item-name">物管名称</div>
        <div class="item-value">{{sendObj.managementName}}</div>
      </div>
      <div class="item">
        <div class="item-name">大修基金</div>
        <div class="item-value">{{sendObj.repairMoney}}元</div>
      </div>
      <div class="item">
        <div class="item-name">产权性质</div>
        <div class="item-value">{{sendObj.cqxz}}</div>
      </div>
      <div class="item">
        <div class="item-name">消防情况</div>
        <div class="item-value">{{sendObj.xfqk}}</div>
      </div>
      <div class="item">
        <div class="item-name">巡查记录</div>
        <div
          class="item-value"
          :style="sendObj.patrolCount > 0 ? '' : 'pointer-events: none;'"
          @click="jumpList(sendObj.id)">{{ sendObj.patrolCount }}</div>
      </div>

      <ul class="img-box imgs_ul">
        <li class="img-item img-list" :class="{'show-desc':obj.remark}" v-for="(obj,i) of list_img">
          <div class="img-content radius-m">
            <img class="img-src img_tu"  :src="show_path+obj.path" />
            <!--<div class="img-group">
              <div class="img-btn">
                <div class="del-btn" @click.stop="del(i)">X</div>
              </div>
              <div class="img-btn">
                <div class="desc-btn" @click.stop="showDesc(i)">A</div>
              </div>
            </div>-->
          </div>
          <div class="img-desc">{{obj.remark}}</div>
        </li>
      </ul>
      <ul class="video-list" v-for="(obj,i) of list_mv">
        <video controls>
          <source :src="show_path+obj.path" type="video/mp4">
          <source :src="show_path+obj.path" type="video/ogg">
          您的浏览器不支持Video标签。
        </video>
      </ul>

    </div>
     <Navigate v-model="show" :tencentKey="tencentKey" :from="from" :to="to"></Navigate>
     <div class="ditu yc" id="map">
           <div id="ditu">地图</div>
           <div class="lie_list"></div>
         </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
import "../../assets/js/zoom.js";
import Navigate from "./Navigate.vue";
import { Cell, Button } from "mint-ui";
export default {
  name: "jzw_see",
  data() {
    return {
      show: false,//是否显示
      sendObj: {},
      xqda_params:null,
      userId: null,
      auth:'',//权限  0无权限 1有权限
      list_img:[],
      list_mv:[],
      show_path:null,
      player:null,
      loupan:{
        jxmdNum:0,
        zgfNum:0,
        data:[]
      },
      tencentKey: "FABBZ-K4T6W-MLNRI-RPAMH-SHHYT-7AFKP",//腾讯地图apikey
      from: {
        name: "当前位置", //起点名称
        lat: "", //纬度
        lng: "" //经度
      },
      to: {
        name: "", //终点名称
        lat: "", //纬度
        lng: "" //经度
      },
    };
  },
  components: {
    Navigate, Cell, Button
  },
  destroyed() {
      setTimeout( () => {
        this.$zoom.showImagesFn.hideContainer();
      })
    },
  methods: {
    jiequ(dz,num){
      if(dz){
        dz = dz.trim();
      }
      if(dz.length>num){
        dz = dz.substring(0,num)+'…';
      }
      return dz;
    },
    //  跳转巡查列表
    jumpList (id) {
      sessionStorage.setItem('pdId', '1')
      localStorage.setItem('listId', id)
      this.$router.push({path: '/community_list_rwjb'});
    },
    tomap(){
      if(this.from.lat==""){
        this.$toast("正在获取当前位置")
        return
      }
      console.log(this.from)
      this.show = true;
    },
    getmap(){
      var _this=this
      try{
        let map = new plus.maps.Map("ditu")
        map.getUserLocation(function (state, point) {
          // var jwd = point.longitude + "," + point.latitude
          _this.from.lat = point.latitude;
          _this.from.lng = point.longitude;
          map.close();
          // _this.show = true;
          // alert(JSON.stringify(point))
        })
      }catch(e){
        //TODO handle the exception
      }
    },
    back(){
      //this.$router.push(this.xqda_params.from);
      this.$router.back()
    },
    edit(){
      this.$router.push("/jzw_edit");
    },
    getListObjMc(name,key){//根据id获取列表对象的名称
      var cqxz = [
          {mc:'住宅',id:1},
          {mc:'商用',id:2},
          {mc:'商住混合',id:3},
          {mc:'其他',id:4}
      ];
      var xfqk = [
          {mc:'正常',id:1},
          {mc:'部分设施缺失但能正常供水',id:2},
          {mc:'不能正常供水',id:3}
      ];
      var lb = [
        {mc:'小商场',id:1},
        {mc:'小医院',id:2},
        {mc:'小餐饮场所',id:3},
        {mc:'小旅馆',id:4},
        {mc:'小歌舞厅娱乐场所',id:5},
        {mc:'小网吧',id:6},
        {mc:'小美容洗浴场所',id:7},
        {mc:'小生产加工企业',id:8},
        {mc:'废品回收',id:9},
        {mc:'其他',id:10}
      ];
      var result = '';
      var list = [];
      if(name=='cqxz'){
        list = cqxz;
      }else if(name=='xfqk'){
        list = xfqk;
      }else if(name=='lb'){
        list = lb;
      }

      for(var n=0;n<list.length;n++){
        if(list[n].id===key){
          result = list[n].mc;
        }
      }
      return result;
    },
    init() {//初始化
      var _this = this;
      try{
        plus.nativeUI.showWaiting("正在加载...");
      }catch(e){
        console.log(e.message);
      }
      _this.axios.get(_this.$global_msg.Url.host + "/construction/selectConstructionById",{
      	params:{
          id:_this.xqda_params.xq_id
        }
      }).then(function (data) {
        try{
          plus.nativeUI.closeWaiting();
        }catch(e){
          console.log(e.message);
        }
        console.log('findZgfinfoById:',data);
        

        if(data&&data.data){
          if(data.data.code==0){
            _this.to.name=data.data.rows.address
            var zdian=data.data.rows.map.split(",")
            console.log(data.data.rows.map.split(","))
            _this.to.lat=zdian[1]
            _this.to.lng=zdian[0]
            var obj = data.data.rows;
            _this.sendObj = obj;
            _this.sendObj.managementName = obj.managementName?obj.managementName.trim():'';
            _this.sendObj.cqxz = _this.getListObjMc('cqxz',obj.propertyNature);
            _this.sendObj.xfqk = _this.getListObjMc('xfqk',obj.fireControlInfo);
            _this.sendObj.address = _this.sendObj.address?_this.sendObj.address.trim():'';
            var jwd = _this.sendObj.map;
            if(jwd){
              if(jwd.trim().toLowerCase()=='null'||jwd.trim().toLowerCase()=='undefined'){
                jwd = '';
              }else{
                jwd = jwd.trim();
              }
            }else{
              jwd = '';
            }
            _this.sendObj.map = jwd;
            _this.list_img = obj.fileInfos?obj.fileInfos:[];
            _this.list_mv = obj.zgfVideos?obj.zgfVideos:[];
            _this.sendObj.fileInfos = null;
            _this.sendObj.zgfVideos = null;
          }else{
            _this.$toast(data.data.msg);
          }
        }else{
          _this.$toast('查询失败');
        }
      }).catch(error => {
        _this.$terminal._error(error);
      });
    },
    checkAuth() {//检查权限
      var _this = this;
      try{
        plus.nativeUI.showWaiting("正在加载...");
      }catch(e){
        console.log(e.message);
      }
      _this.axios.get(_this.$global_msg.Url.host + "/construction/isCanBj",{
      	params: {
          userid:_this.userId
        }
      }).then(function (data) {
        try{
          plus.nativeUI.closeWaiting();
        }catch(e){
          console.log(e.message);
        }
        console.log('thisUserCanBJ:',data);
        if(data&&data.data){
          _this.auth = data.data.code;
          //_this.auth = 200;
        }else{
          _this.$toast('查询失败');
        }
      }).catch(error => {
        _this.$terminal._error(error);
      });
    },
    getLoupan(){//查询楼盘
      var _this = this;
      var data = [
        [{},{},{}],
        [{},{},{}],
        [{},{},{}],
        [{},{},{}],
        [{},{},{}]
      ];
      var loupan = {
        data:data,
        jxmdNum:0,
        zgfNum:0
      };

      // loupan.data[0][2] = {name:'王五',ms:'XX诊所',type:'jxmd'};
      // loupan.data[1][1] = {name:'成龙',ms:'XX餐饮店',type:'jxmd'};
      // loupan.data[2][2] = {name:'李四',ms:'住改仓',type:'zgf'};
      // loupan.data[3][0] = {name:'李五',ms:'网约房',type:'zgf'};
      // loupan.data[3][1] = {name:'花小名',ms:'XX餐饮店',type:'jxmd'};
      // loupan.jxmdNum = 3;
      // loupan.zgfNum = 2;

      _this.loupan = loupan;
    },
    stopMP(){

    },
    showDesc(i) {//显示图片描述
      this.list_img[i].showDesc = !this.list_img[i].showDesc;
      this.$forceUpdate();
    },
    plusReady: function() {}
  },
  beforeCreate() {
    document.addEventListener("plusready", this.plusReady, false);
  },
  beforeRouteLeave(to, from, next) {
      //设置路由的 meta
      if(!(to.path=='/community_list_rwjb'||to.path=='/jzw_edit')){
        localStorage.setItem("list_update",JSON.stringify(this.sendObj));
      }
      next();
  },
  mounted() {
    var _this = this;
    this.xqda_params = localStorage.getItem("xqda_params")?JSON.parse(localStorage.getItem("xqda_params")):{};
    this.userId = localStorage.getItem("userId"); //用户id
    this.show_path = this.$global_msg.Url.hosts+'';

    this.getmap()
    //初始化
    this.init();
    //查询楼盘
    this.getLoupan();
    //检查权限
    this.checkAuth();


    //物理返回
    // window.addEventListener("popstate", function(){
    //   _this.back();
    // }, false);
  },
  created() {}
};
</script>
<style scoped>
  .ditu,#ditu{
    display: none;
    width: 0px;
    height: 0px;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .btn-add{
    position: absolute;
    right: 0.37037rem;
    font-size: 0.388888rem;
    bottom: 0.462962rem;
  }

  .main {
    padding-top: 1.8519rem;
    /* height: 100vh; */
    box-sizing: border-box;
    background: #fff;
    /*padding-bottom: 3.796314814814815rem; */
    /* padding-top: 10.0008px; */
  }

  /* 圆角 */
  .radius-b{
    border-radius: 0.222222rem;
  }
  .radius-m{
    border-radius: 0.166666rem;
  }
  .radius-s{
    border-radius: 0.111111rem;
  }

  /* 表单 */
  .item{
    width: 100%;
    height: 1.388888rem;
    display: flex;
    align-items: center;
    border-bottom: 1px #DDDDDD solid;
  }
  .item .item-name{
    padding-left: 0.37037rem;
    padding-right: 0.37037rem;
    width: 2.222222rem;
    color: #000000;
    font-size: 0.388888rem;
  }
  .item .item-value{
    flex: 1;
    padding-right: 0.37037rem;
    color: #a3a3a3;
    text-align: right;
    font-size: 0.388888rem;
    height: 1.388888rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .item .item-select{
    flex: 1;
    padding-right: 0.37037rem;
    color: #a3a3a3;
    font-size: 0.388888rem;
    display: flex;
    align-items: center;
  }
  .item .item-select .item-select-value{
    flex: 1;
    height: 1.388888rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
  }
  .item .item-select .item-select-icon{
    margin-left: 0.222222rem;
    width: 0.453703rem;
    height: 0.611111rem;
    display: flex;
    align-items: center;
  }

  /* 图片列表 */
  .img-box{
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    margin-top: 0.74074rem;
    margin-bottom:0.37037rem;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
  }
  .img-box .img-item{
    width: 4.481481rem;
    min-height: 2.814814rem;
    background-image: url('../../assets/images/tianjia.png');
    background-size: 100% 100%;
    margin-top: 0.425925rem;
    margin-bottom: auto;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  /* 图片列表的内容和按钮 */
  .img-box .img-item .img-content{
    width: 100%;
    height: 2.814814rem;
    z-index: 10;
    background-color: #FFFFFF;
    position: relative;
    border: 1px #CCCCCC solid;
    overflow:hidden;
  }
  .img-box .img-item .img-content .img-src{
    width: 100%;
    height: 100%;
    z-index: 11;
  }
  .img-box .img-item .img-content .img-group{
    width: 1.388888rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;
    border-left: 1px #FFFFFF solid;
    display: flex;
    flex-direction: column;
  }
  .img-box .img-item .img-content .img-group .img-btn{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px #FFFFFF solid;
  }
  .img-box .img-item .img-content .img-group .img-btn:last-child{
    border-left: none;
  }
  .img-box .del-btn{
    color: #FFFFFF;
    font-size: 0.925925rem;
  }
  .img-box .desc-btn{
    color: #FFFFFF;
    font-size: 0.925925rem;
  }
  /* 图片列表的描述 */
  .img-box .show-desc{
    /*height: 3.703703rem;*/
  }
  .img-box .img-item .img-desc{
    width: 100%;
    height: 0.851851rem;
    text-align: left;
    flex: 1;
    background-color: #FFFFFF;
    display: none;
    align-items: center;
    justify-content: flex-start;
  }
  .img-box .show-desc .img-desc{
    display: flex;
  }

  ul,li{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  /*.img-list:first-child{
    margin-left: 4.814814rem;
  }*/
  .img-upload{
    position: absolute !important;
    top: 0;
    left: 0;
  }


  /* 按钮 */
  .btn-box{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    margin-top: 0.37037rem;
    margin-bottom: 1.37037rem;
  }
  .btn-box .btn{
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.074074rem;
    background: #309dfa;
    color: #fff;
    font-size: 0.388888rem;
  }


  /* 弹框 */
  .tk{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tk .tk-bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 31;
    background-color: rgba(0,0,0,0.4);
  }
  .tk .tk-box{
    width: 9rem;
    height: auto;
    max-height: 7.407407rem;
    background-color: #FFFFFF;
    z-index: 32;
    display: flex;
    flex-direction: column;
    border-radius: 0.222222rem;
  }

  .tk .tk-head{
    width: 100%;
    height: 1.4351851851851851rem;
    font-size: 0.388888rem;
    border-bottom: 1px #ddd solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tk .tk-head .tk-head-title{
    margin-left: 0.37037rem;
    flex: 1;
    height: 1.4351851851851851rem;
    display: flex;
    align-items: center;
  }
  .tk .tk-head .tk-head-close{
    margin-right: 0.37037rem;
    width: 0.444444rem;
    height: 0.444444rem;
  }


  .tk .tk-list{
    flex: 1;
    width: 100%;
    overflow-y: scroll;
  }
  .tk .tk-item{
    width: 100%;
    height: 1.3888888888888888rem;
    font-size: 0.388888rem;
    display: flex;
    align-items: center;
  }
  .tk .tk-item .tk-item-value{
    margin-left: 0.37037rem;
  }
  .tk .tk-list .tk-item-checked{
    color: #2a6cfe;
  }

  .tk .tk-btns{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    margin-top: 0.37037rem;
    margin-bottom: 0.37037rem;
  }
  .tk .tk-btns .tk-btn{
    margin-left: 1.851851rem;
    margin-right: 1.851851rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.074074rem;
    background: #309dfa;
    color: #fff;
    font-size: 0.388888rem;
  }
  .tk .jzw{
    max-height: 11.111111rem !important;
  }
  .tk .lb{
    max-height: 14.814814rem !important;
  }

  /* 底部弹框 */
  .btm_tk_item {
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #ddd;
    text-align: center;
    margin-left: 0.185185rem;
    margin-right: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
  }
  .btm_tk_item:first-child{
    border-radius: 0.148148rem 0.148148rem 0 0;
  }
  .btm_tk_item-end{
    border-radius: 0 0 0.148148rem 0.148148rem;
  }
  .btm_tk_title{
    color: #919191;
  }
  .btm_tk_cancle{
    font-weight: bolder;
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #ddd;
    text-align: center;
    margin: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
    border-radius: 0.148148rem;
  }
  .van-popup{
    background: none;
  }

  /* 视频列表 */
  .video-list{
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    margin-top: 0.74074rem;
    margin-bottom:0.37037rem;
    width: auto;
    height: auto;
    display: flex;
    position: relative;
  }
  .video-list video{
    width: 100%;
    height: 4.87037rem !important;
  }
  .video-list .del{
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0.925925rem;
    overflow: hidden;
  }
  .video-list .del img{
    width: 100%;
    height: 100%;
  }

  /* 楼盘表 */
  .loupan{
    width: 100%;
    background: #fbfbfb;
    display: flex;
    flex-direction: column;
    font-size: 0.388888rem;
  }
  .loupan .info{
    margin-top: 0.185185rem;
    background: #FFFFFF;
    width: 100%;
    height: 0.981481rem;
    display: flex;
  }
  .loupan .info .info-item{
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    margin-top: 0.296296rem;
    margin-bottom: 0.185185rem;
    display: flex;
    align-items: center;
  }
  .loupan .info .info-item .showColor{
    width: 0.666666rem;
    height: 0.314814rem;
    margin-right: 0.37037rem;
  }
  .loupan .color-jxmd{
    background-color: #0067d0;
    color: #FFFFFF;
  }
  .loupan .color-zgf{
    background-color: #4dc1f1;
    color: #FFFFFF;
  }
  .loupan .hang{
    width: 100%;
    height: 1.629629rem;
    display: flex;
    background: #FFFFFF;
  }
  .loupan .hang:last-child{
    border-bottom: 1px #DDDDDD solid;
  }
  .loupan .hang .lie{
    flex: 1;
    border-top: 1px #DDDDDD solid;
    border-right: 1px #DDDDDD solid;
    display: flex;
    flex-direction: column;
  }
  .loupan .hang .lie:first-child{
    margin-left: 0.37037rem;
  }
  .loupan .hang .lie:last-child{
    margin-right: 0.37037rem;
    border-right: none;
  }
  .loupan .hang .lie .panel{
    height: 1.629629rem;
    width: 100%;
    padding-top: 0.277777rem;
    display: flex;
    flex-direction: column;
  }
  .loupan .hang .lie .panel span{
    margin-left: 0.185185rem;
  }
  .loupan .hang .lie .panel span:not(:first-child){
    font-size: 0.296296rem;
  }

  .sfdw{
    width: 0.416666rem;
    height: 0.648148rem;
  }

</style>
